<template>
    <el-dialog v-model="$store.state.userCenter.updateGroup">
        <template #header>
            <span class="font-size-30px">修改用户组</span>
        </template>
        <el-form>
            <el-form-item label="用户组名称">
                <el-input v-model="userGroupName.name"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="$store.commit('userCenter/userGroupUpdate',false)">取消</el-button>
                <el-button type="primary" @click="isUpdateGroup(row)">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref, onMounted, defineProps, watch } from 'vue'
import { UpdateUserGroup } from '@/api/group.js'
import { ElMessage } from 'element-plus'
import { useStore } from 'vuex'
const store = useStore()
//接收从父组件传过来的刷新页面的函数
const props = defineProps({
    isRefresh: Function,
    row:Object
})
//修改用户组
// const nullUserGroupName =ref({
//     id: '',
//     name: '',
// })
const userGroupName = ref({
    id: '',
    name: '',
})
watch(()=>props.row,(newVal)=>{
    userGroupName.value = newVal
},{
    deep:true
})

const isUpdateGroup =async ()=>{
    if(!userGroupName.value.name) {
        return ElMessage.warning('用户组名称不能为空')
    }
    const res =await UpdateUserGroup(userGroupName.value)
    if(res.data.success){
        ElMessage.success('更改成功')
        store.commit('userCenter/userGroupUpdate',false)
        props.isRefresh()
    }else{
        ElMessage.warning('更改失败')
    }
}




</script>
